<!-- 弹窗组件 -->

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue'

const props = defineProps<{
  // 标题内容
  title: string;
  // 高度
  height: string;
  // 宽度
  width: string;
  // 是否打开
  showDialog: boolean;
}>()

const refProps = toRefs(props)
let visible = ref(props.showDialog)

const emit = defineEmits(['getInfo', 'contactShow'])

watch(refProps.showDialog, (val) => {
  visible.value = val
}, {
  deep: true
})

const determine = () => {
  // 把信息传给父组件
  emit('getInfo', 111);
}

const cancel = () => {
  emit('contactShow', false);
}

</script>

<template>
  <el-dialog
    v-model="visible"
    :show-close="false"
    append-to-body
    :style="{ width: `${props.width}`, height: `${props.height}`, padding: 0 }"
    class="w-1/3 h-2/5 box-class rounded-lg"
    custom-class="dialog-class"
  >
    <template #header>
      <div class="h-16 w-full title-calss leading-16 indent-3 font-sans text-lg not-italic font-normal text-black">
        {{ props.title }}
      </div>
    </template>
    <slot class="card-body">
      
    </slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">Cancel</el-button>
        <el-button type="primary" @click="determine">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="stylus">
.box-class {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 80%, #E3F6F8FF 120%);
  position: relative;
}
.title-calss {
  background: linear-gradient(90deg,  #E3F6F8FF 0%, #E3F6F8FF 70%, #ffffff 100%);
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  font-family: DINPro;
}

.dialog-footer {
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 100%;
}

</style>
